import React from 'react';
import { Card, Statistic, Avatar } from 'antd';
import { CardProps } from 'antd/es/card';
import { StatisticProps } from 'antd/es/statistic';
import styles from './styles.module.css';

export interface InfoCardProps extends Omit<CardProps, 'children' | 'variant'> {
  // 卡片类型
  cardType?: 'default' | 'statistic' | 'profile' | 'status';
  // 统计数据配置（用于统计类卡片）
  statistic?: StatisticProps;
  // 图标
  icon?: React.ReactNode;
  // 用户头像（用于个人信息类卡片）
  avatar?: {
    src?: string;
    alt?: string;
    size?: number | 'small' | 'default' | 'large';
  };
  // 状态色彩
  statusColor?: 'success' | 'warning' | 'error' | 'info' | 'default';
  // 子内容
  children?: React.ReactNode;
}

/**
 * 统一的信息卡片组件
 * 支持多种展示模式：统计信息、个人资料、状态信息等
 * 提供一致的视觉效果和交互体验
 */
const InfoCard: React.FC<InfoCardProps> = ({
  cardType = 'default',
  statistic,
  icon,
  avatar,
  statusColor = 'default',
  children,
  className,
  ...cardProps
}) => {
  const getCardClassName = () => {
    const baseClass = styles.infoCard;
    const variantClass = styles[`infoCard_${cardType}`];
    const statusClass = statusColor !== 'default' ? styles[`status_${statusColor}`] : '';
    return `${baseClass} ${variantClass} ${statusClass} ${className || ''}`;
  };

  const renderContent = () => {
    switch (cardType) {
      case 'statistic':
        return (
          <div className={styles.statisticContent}>
            {icon && <div className={styles.statisticIcon}>{icon}</div>}
            {statistic && <Statistic {...statistic} />}
            {children}
          </div>
        );
      
      case 'profile':
        return (
          <div className={styles.profileContent}>
            {avatar && (
              <Avatar
                src={avatar.src}
                alt={avatar.alt}
                size={avatar.size || 'large'}
                className={styles.profileAvatar}
              />
            )}
            <div className={styles.profileInfo}>
              {children}
            </div>
          </div>
        );
      
      case 'status':
        return (
          <div className={styles.statusContent}>
            {icon && <div className={styles.statusIcon}>{icon}</div>}
            {children}
          </div>
        );
      
      default:
        return (
          <div className={styles.defaultContent}>
            {icon && <div className={styles.defaultIcon}>{icon}</div>}
            {children}
          </div>
        );
    }
  };

  return (
    <Card
      {...cardProps}
      className={getCardClassName()}
    >
      {renderContent()}
    </Card>
  );
};

export default InfoCard; 